<template>
    <div class="messages" v-loading="chatLoading" :element-loading-text="chatLoadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="message" v-for="(message, index) in messages" :key="index">
            <el-row class="user" v-if="message.role == 'user'">
                <el-col :span="22" :offset="1" class="user_content">
                    <mavon-editor class="user_content_span"
                        v-model="message.content"
                        :subfield="false" 
                        :defaultOpen="'preview'" 
                        :toolbarsFlag="false" 
                        :editable="false"/>
                </el-col>
                <el-col :span="1" class="user_head">
                    <img src="../../assets/img/logo.png">
                </el-col>
            </el-row>
            <el-row v-if="message.role == 'user' && message.tokens">
                <el-col :span="22" :offset="1" class="user_tokens">
                    <span>此问题消耗了 {{ message.tokens || 0 }} tokens</span>
                </el-col>
            </el-row>

            <el-row class="bot" v-if="message.role == 'assistant'">
                <el-col :span="1" class="bot_head">
                    <svg t="1683273862076" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2681">
                        <path d="M501.8 121.6h20.4v128h-20.4z" fill="#A0ABBD" p-id="2682"></path>
                        <path d="M512 873.5H226.5c-32.6 0-59.1-26.4-59.1-59.1V285.7c0-32.6 26.4-59.1 59.1-59.1H512v646.9z" fill="#6484BF" p-id="2683"></path>
                        <path d="M512 226.7h285.5c32.6 0 59.1 26.4 59.1 59.1v528.7c0 32.6-26.4 59.1-59.1 59.1H512V226.7z" fill="#4C6FAF" p-id="2684"></path>
                        <path d="M640.1 448.2m-59.1 0a59.1 59.1 0 1 0 118.2 0 59.1 59.1 0 1 0-118.2 0Z" fill="#FFFFFF" p-id="2685"></path>
                        <path d="M384.1 448.2m-59.1 0a59.1 59.1 0 1 0 118.2 0 59.1 59.1 0 1 0-118.2 0Z" fill="#FFFFFF" p-id="2686"></path>
                        <path d="M512 113.2m-49 0a49 49 0 1 0 98 0 49 49 0 1 0-98 0Z" fill="#A0ABBD" p-id="2687"></path>
                        <path d="M167.6 615.6l-54.4-27.2V458.1l54.4-29.2zM856.4 427.9l54.4 27.3v130.2l-54.4 29.2z" fill="#39507A" p-id="2688"></path>
                    </svg>
                </el-col>
                <el-col :span="22" class="bot_content">
                    <mavon-editor class="bot_content_span"
                        v-model="message.content"
                        :subfield="false" 
                        :defaultOpen="'preview'" 
                        :toolbarsFlag="false" 
                        :editable="false"
                        style="height: auto;"/>
                </el-col>
            </el-row>
            <el-row v-if="message.role == 'assistant'">
                <el-col :span="22" :offset="1" class="bot_tokens">
                    <span>此回答消耗了 {{ message.tokens || 0 }} tokens</span>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    props: ["historyId"],
    data() {
        return {
            messages: [],
            loading: false,
        }
    },
    mounted() {
        this.getMessages(this.historyId);
    },
    methods: {
        getMessages(historyId){
            this.chatLoading = true;
            this.chatLoadingText = "正在拉取聊天信息...";
            this.$api.ai.historyDetail(historyId).then(res=>{
                this.messages = res.data;
                this.chatLoading = false;
                // 等待DOM更新完成后滚动到底部
                this.$nextTick(() => {
                    this.toChatEnd();
                })
            })
        },
    }
}
</script>

<style lang="less" scoped>
.messages {
    box-sizing: border-box;
    padding: 20px;
    height: 70%;
    overflow: auto;
    .message{
        margin-bottom: 20px;
        .user {
            .user_head{
                img {
                    height: 40px;
                }
            }
            .user_content {
                .user_content_span {
                    height: auto;
                    min-height: auto;
                    font-size: 20px;
                    float: right;
                }
            }
        }
        .user_tokens {
            text-align: right;
            font-size: 12px;
        }
        .bot {
            .bot_head {
                text-align: right;
                svg {
                    height: 40px;
                }
                
            }
            .bot_content {
                .bot_content_span {
                    height: auto;
                    min-height: auto;
                    font-size: 20px;
                    float: left;
                }
            }
        }
        .bot_tokens {
            display: inline-block;
            padding: 0 10px;
            font-size: 12px;
        }
    }
}
</style>